<template>
	<view class="page pageBg">
		<v-header title="审批" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<!--导航栏切换-->
			<view class="tabNav f fb marginBot30">
				<view class="tabItem  " v-for="(item, index) in navTab" :key="index" @click="navTap(item, index)">
					<view class="tabItems f fc" :class="{ actname: navIndex == index }">{{ item.name }}</view>
					<view class="borderbot" v-if="navIndex == index"></view>
				</view>
			</view>
			<!--提示-->
			<view class="tipCont f fs">
				<text class="cuIcon-infofill"></text>
				<text>如需了解更多详情，请登录www.bbi.com.cn</text>
			</view>
			<!--搜索-->
			<view class="searchCont  ">
				<view class="cell f fs">
					<label>企业名称:</label>
					<view class=" f fl borInput">
						<input type="text" value="" placeholder="请输入企业名称" class=" fl " />
						<text class="cuIcon-search"></text>
					</view>
				</view>
				<view class="cell f fs">
					<label>业务审批:</label>
					<view class=" f fl borInput">
						<picker @change="selectChange($event, 'status')" class=" fl " :value="sexIndex" :range="sexArray" range-key="value">
							<input :value="sexArray[sexIndex].value" disabled placeholder="请选择园区服务" class="disInput" />
						</picker>
						<text class="cuIcon-unfold"></text>
					</view>
				</view>
				<view class="cell f fb">
					<view class="item1 f fc">近一个月</view>
					<view class="item1 f fc">近3个月</view>
					<view class="f fl fb picker">
						<input
							@click="onShowDatePicker('range')"
							class="fl  dateinput"
							:value="chosetime"
							disabled
							placeholder="请选择审批日期"
							placeholder-style="color:#FFA01E"
						/>
						<text class="cuIcon-calendar"></text>
					</view>
				</view>
			</view>
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-seconds="true" @confirm="onSelected" @cancel="onCancel" />
			<!--列表-->
			<scroll-view v-if="list.length > 0" scroll-y @scrolltolower="getList(0)" class="lineh">
				<view class="list-cell" v-for="(item, index) in list" :key="index">
					<view class="title">企业入孵流程</view>
					<view class="cont">
						<view class="status f fs">
							<label>审批状态:</label>
							<view class="sitem f fs" v-if="item.status == 0">
								<image src="../../static/img/rectify_1.png" mode=""></image>
								<text class="dsp">待审批</text>
							</view>
							<view class="sitem f fs" v-else>
								<image src="../../static/img/rectify_3.png" mode=""></image>
								<text class="ysp">已审批</text>
							</view>
						</view>
						<view class="status">
							<label>公司名称:</label>
							北京文化科技有限公司
						</view>
						<view class="status">
							<label>创建时间:</label>
							2021-1-1 12:10:11
						</view>
					</view>

					<view class="czBtn padTop f fa">
						<view class="combtn f fc bg1" @click="toApprovalDeatil">审批</view>
						<view class="combtn f fc bg3">释放</view>
						<!-- 	<view class="combtn f fc bg1">
							抓取
						</view> -->
					</view>
				</view>
				<view style="padding-bottom: 20px;"><load-more :loadingType="loadingType"></load-more></view>
			</scroll-view>
			<view v-else class="f fc fn nodata">
				<view class="img"></view>
				<view class="text">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
import loadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		loadMore,
		MxDatePicker
	},
	data() {
		return {
			loadingType: 0, // 0 还有数据可以加载  , 1 重新加载， 2 没有更多了
			h: this.$h,
			navIndex:0,
			navTab: [
				{
					state: 0,
					name: '待审批'
				},
				{
					state: 1,
					name: '已审批'
				}
			],
			list: [
				{
					id: 1,
					status: 0,
					title: '企业如福利一次',
					name: '北京科技有限公司1',
					time: '2021-1-1 12:10:11'
				},
				{
					id: 2,
					status: 0,
					title: '企业如福利一次',
					name: '北京科技有限公司2',
					time: '2021-1-1 12:10:11'
				},
				{
					id: 3,
					status: 1,
					title: '企业如福利一次',
					name: '北京科技有限公司3',
					time: '2021-1-1 12:10:11'
				}
			],
			//园区服务
			sexIndex: -1,
			sexArray: [
				{
					code: 0,
					value: '企业入孵'
				},
				{
					code: 1,
					value: '政策咨询'
				},
				{
					code: 3,
					value: '法律协助'
				}
			],
			//日期选择器范围
			showPicker: false,
			range: [],
			type: 'rangetime',
			value: '',
			chosetime: ''
		};
	},
	onShow() {
	    try {
	        const value = uni.getStorageSync('approvalData');
	        if (value) {
	            this.navIndex = value;
	            try {
	                uni.removeStorageSync('index');
	            } catch(e) {
	                // error
	            }
	        }
	    } catch(e) {
	        // error
	    }
	},
	methods: {
		navTap(item, index) {
			this.navIndex = index;
		},
		//选择园区服务
		selectChange(e, type) {
			let than = this;
			let index = e.target.value;
			if (type == 'status') {
				//隐患状态
				if (index >= 0) {
					than.sexIndex = index;
					than.addquery.sex = than.sexArray[index].code;
				}
			}
		},
		//去审批
		toApprovalDeatil(){
			uni.navigateTo({
				url:'../../views/message/approvalDetail'
			})
			},
		//选择日期
		onShowDatePicker(type) {
			//显示
			this.type = type;
			this.showPicker = true;
			this.value = this[type];
		},
		onSelected(e) {
			//选择
			this.showPicker = false;
			if (e) {
				this[this.type] = e.value;
				this.chosetime = e.value[0] + ' - ' + e.value[1];
			}
		},
		onCancel(e) {
			//选择
			this.showPicker = false;
			this[this.type] = '';
			this.chosetime = '';
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/style/approval.scss';
</style>
